<template>

  <el-container>
    <!-- 左侧 -->
    <el-aside width="200px">
      <img src="../assets/loginBox.svg">
      <p class="imgTitle">欢迎使用动力云客系统</p>
    </el-aside>

    <!-- 右侧 -->
    <el-main>
      <div class="loginTitle">欢迎登录</div>

      <!-- 表单 -->
      <!-- :model="user"       表单绑定的数据 -->
      <!-- label-width="120px" 表单整体距离左侧的宽度 -->
      <!-- :rules="loginRules" 绑定验证规则 -->
      <!-- ref="loginRefForm"  表单提交之前验证表单的验证规则 -->
      <el-form :model="user" label-width="120px" :rules="loginRules" ref="loginRefForm">

        <!-- prop="loginAct" 要验证的内容 -->
        <el-form-item label="账号" prop="loginAct">
          <el-input v-model.trim="user.loginAct" />
        </el-form-item>

        <!-- prop="loginPwd" 要验证的内容 -->
        <el-form-item label="密码" prop="loginPwd">
          <el-input type="password" v-model.trim="user.loginPwd" />
        </el-form-item>

        <!-- 登录按钮和表单输入框对齐，使用el-form-item标签包起来 -->
        <el-form-item>
          <el-button label="登录" type="primary" @click="login">登  录</el-button>
        </el-form-item>

        <el-form-item>
          <el-checkbox label="记住我(7天内免登录)" v-model="user.rememberMe"/>
        </el-form-item>

      </el-form>
    </el-main>
  </el-container>

</template>

<script>
  import {doGet, doPost} from "../http/httpRequest.js";
  import {getTokenName, messageTip, removeToken} from "../util/util.js";

  export default {
    // 组件的名字
    name: "LoginView",

    // 定义页面使用到的变量
    data() {
      return {
        // 对象变量定义，使用{}
        user: {
          loginAct: '',
          loginPwd: '',
          rememberMe: false
        },

        // 定义登录表单的验证规则
        loginRules: {
          // 定义账号的验证规则，规则可以有多个，所以是数组
          loginAct: [
            // required: true 不能为空
            // message 提示信息
            // trigger: 'blur' 光标离开时触发规则
            { required: true, message: '请输入登录账号', trigger: 'blur' }
          ],
          // 定义密码的验证规则
          loginPwd: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 6, max: 12, message: '密码长度为6-12位', trigger: 'blur' }
          ]
        }
      }
    },

    // 钩子函数，渲染完成后自动执行
    mounted() {
      // 调用免登录函数，判断是否免登录
      this.freeLogin();
    },

    // 页面上需要使用功能的js函数，都在methods属性中定义
    methods: {
      // 登录函数
      login() {
        // 提交前保证输入框的合法性，验证表单的验证规则
        this.$refs.loginRefForm.validate((isValid) => {
          // isValid是验证后的结果，true表示通过，否则未通过
          if (isValid) {
            // 验证通过，可以提交登录
            // 登录请求由Spring Security处理，无法使用@RequestBody注解接收参数，所以如果直接传入Json对象，后端接收不到，需要传入一个FormData对象
            let formData = new FormData();
            formData.append("loginAct", this.user.loginAct);
            formData.append("loginPwd", this.user.loginPwd);
            formData.append("rememberMe", this.user.rememberMe);

            // 发送post请求
            doPost("/api/login", formData).then((resp) => {
              // 判断后端返回的结果码
              if (resp.data.code === 200) {
                // 登录成功
                messageTip("登录成功", "success");

                // 删除之前存储的token
                removeToken();

                // 前端存储token
                if (this.user.rememberMe === true) {
                  // 如果勾选了记住我，就将token存储到localStorage
                  window.localStorage.setItem(getTokenName(), resp.data.data)
                } else {
                  // 否则将token存储到sessionStorage
                  window.sessionStorage.setItem(getTokenName(), resp.data.data)
                }

                // 跳转到系统的主页面
                window.location.href = "/dashboard";
              } else {
                // 登录失败
                messageTip("登录失败", "error");
              }
            });
          }
        })
      },

      // 免登录函数（自动登录）
      freeLogin() {
        // 判读用户上次登录时是否勾选了记住我
        // 从localStorage中获取登录验证的token
        let token = window.localStorage.getItem(getTokenName());
        // 判断localStorage中是否存在登录验证的token
        if (token) {
          // 存在，则表明上次登录时勾选了，向后端发请求验证token是否合法
          doGet("/api/login/free", {}).then( (resp) => {
            // 如果token校验通过，可以免登陆，跳转到系统主页，否则停留在当前登录页面
            if (resp.data.code === 200) {
              window.location.href = "/dashboard";
            }
          });
        }
        // 不存在，就是没有勾选，不进行其他页面跳转，停留在当前登录页面
      }
    }
  }
</script>

<style scoped>

  /* 左侧 */
  .el-aside {
    background: #1a1a1a;
    width: 40%;           /* 宽度占据整个页面的40% */
    text-align: center;   /* 文本对齐（内容居中） */
  }

  /* 右侧 */
  .el-main {
    height: calc(100vh);  /* 右侧计算100%的屏幕高度，左侧也会跟着变化 */
  }

  /* 左侧logo */
  img {
    height: 413px;  /* 高度 */
  }

  /* logo标题 */
  .imgTitle {
    color: #f9f9f9;
    font-size: 28px;  /* 字体大小 */
  }

  /* 登录表单 */
  .el-form {
    width: 60%;    /* 宽度占据右侧的60% */
    margin: auto;  /* 左右自动对齐 */
  }

  /* 登录标题 */
  .loginTitle {
    text-align: center;   /* 文本对齐（居中） */
    margin-top: 100px;    /* 上边距 */
    margin-bottom: 20px;  /* 下边距 */
    font-weight: bold;    /* 文字加粗 */
  }

  /* 登录按钮 */
  .el-button {
    width: 100%;  /* 宽度占据登录表单的100% */
  }

</style>

